<?php echo $this->doctype() ?>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>EMMS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <base target="main" />
        <link rel="stylesheet" type="text/css" href="/js/dojo/1.7.2/dijit/themes/claro/claro.css"/>
        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
        <link rel="stylesheet" type="text/css" href="/css/survey.css"/>
        <script type="text/javascript" src="/js/dojo/1.7.2/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dijit.Tooltip");
            dojo.require("dijit.Menu");
        </script>
        <script type="text/javascript">
            window.onload = function() {
                dojo.xhrGet({
                    url: '<?php echo $this->charts['day']['chartData'] ?>/Legend/1',
                    handleAs: "json",
                    timeout: 5000,
                    load: function(response, ioArgs) {                
                        elm = response.elements[0].keys;
                            for (i2 = 0; i2 < elm.length; ++i2) {
                                var objCol = dojo.byId('c'+i2);
                                var objTxt = dojo.byId('t'+i2);
                                objCol.style.backgroundColor = elm[i2]['colour'];
                                objTxt.innerHTML = '<a target=bottom href=/admin/performance-data/browse/<?php echo $this->params['p1'] ?>/' + <?php echo $this->params['v1'] ?> + '/<?php echo $this->params['p2'] ?>/' + '<?php echo $this->params['v2'] ?>' +  '/Metric/' + elm[i2]['text'] + '>' + elm[i2]['text'] + '</a>';
                            }
                    },
                    error: function(response, ioArgs) {
                        //alert('Failed xhrGet');
                    }
                });
            };
        </script>

    </head>
    <body class="claro">
        
        <div class="vheader">
            <h1><?php echo $this->title ?></h1>
            <p><?php echo $this->subtitle ?>
        </div>

        <div class="vcontent">
        
            <?php foreach($this->charts as $chart): ?>
                <?php echo $this->partial('partials/chart.phtml', $chart); ?>
            <?php endforeach; ?> 
           
            <table cellspacing="50px">
                <tr>
                    <?php for($i=0;$i<=3;$i++): ?>
                    <td style="vertical-align: top">
                    <table>
                        <?php for($j=0;$j<=3;$j++): ?>
                            <tr>
                                <td style="opacity:0.7" id="c<?php echo 4*$i+$j ?>" width="5px"></td>
                                <td><h3 id="t<?php echo 4*$i+$j ?>"></h3></td>
                            </tr>
                        <?php endfor; ?>
                    </table>
                    </td>
                    <?php endfor; ?>
                </tr>
                <tr>
                    <td colspan=4>
                        *<?php echo $this->translate('Retrieve performance data by clicking the corresponding indicator above') ?>
                    </td>
                </tr>
            <table>
            
        </div>

        <div class="vfooter">
            <div class="menu">
                <?php echo $this->link('/admin/'.$this->request->controller.'/view', array('id'=>$this->request->id),$this->title) ?>
                <?php echo $this->link('/admin/performance-data/'.$this->request->controller, array('#'.$this->request->id => ''),$this->translate("Performance to date")) ?>
            </div>
        </div>
        
    </body>
</html>